<script setup>
import { ref } from 'vue'
import MonthCom from './component/month.vue'
import dayjs from 'dayjs'
import request from '@/utils/request'
import { useLoginUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
const { loginUserInfo } = storeToRefs(useLoginUserStore())
//接收日期组件数据方法
const work_time_month = ref(dayjs().format('YYYY-MM'))

const onChangeTime = (newTime) => {
  work_time_month.value = newTime
  get_work_value()
}
//当月工作量变量方法
const now_work_value = ref(0)
const work_value_data = ref({
  workloads: 0,
  committedWorkloads: 0
})
const get_work_value = () => {
  request({
    url: '/workloads/get',
    method: 'get',
    params: {
      userId: loginUserInfo.value.id,
      year: dayjs(work_time_month.value).format('YYYY'),
      month: dayjs(work_time_month.value).format('MM')
    }
  }).then((res) => {
    now_work_value.value = (res.data.committedWorkloads / res.data.workloads) * 100
    work_value_data.value = { ...res.data }
  })
}
get_work_value()
//弹框变量方法
const show_popup = ref(false)
const Work_popup_change = () => {
  show_popup.value = true
}
//提交工作量方法变量
const formData = ref({
  work_today_value: ''
})
const rules = ref({
  work_today_value: [
    { required: true, message: '请输入工作量', trigger: 'blur' },
    { pattern: /^[1-9]\d{0,9}(\.\d{1,2})?$/, message: '工资格式不正确', trigger: 'blur' },
    {
      validator(rule, value, callback) {
        if (value <= 0) {
          // 校验不通过
          return callback(new Error('提交的工作量必须大于0'))
        } else if (
          value >
          work_value_data.value.workloads - work_value_data.value.committedWorkloads
        ) {
          // 校验不通过
          return callback(new Error('提交的工作量必须小于未完成的工作量'))
        } else {
          // 校验通过
          callback()
        }
      }
    }
  ]
})
const formRef = ref(null)
const add_Work_value_submit = async () => {
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      request({
        url: '/workloads/committed',
        method: 'get',
        params: {
          userId: loginUserInfo.value.id,
          submissionDate: dayjs().format('YYYY-MM-DD'),
          committedWorkloads: formData.value.work_today_value
        }
      }).then(() => {
        get_work_value()
        show_popup.value = false
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<template>
  <div class="work_body">
    <nut-navbar fixed title="工作台"></nut-navbar>
    <div class="work_content">
      <!-- 月份组件 -->
      <MonthCom :work_time_month="work_time_month" @onChangeTime="onChangeTime" />
      <div class="now_value_class">
        <div class="now_value_title">工作量:</div>
        <div>
          <nut-circle-progress :progress="now_work_value" :radius="120">
            <div>{{ now_work_value }}%</div>
            <div>{{ work_value_data.committedWorkloads + '/' + work_value_data.workloads }}</div>
          </nut-circle-progress>
        </div>
      </div>
      <!-- 提交每日工作按钮 -->
      <div class="add_work_class">
        <nut-button
          v-if="work_time_month == dayjs().format('YYYY-MM')"
          type="info"
          @click="Work_popup_change"
          >提交工作量</nut-button
        >
      </div>
    </div>
    <!-- 提交工作量弹框 -->
    <nut-popup
      class="popup_class"
      pop-class="popup_class_work"
      v-model:visible="show_popup"
      :style="{ width: '80%', padding: '5px' }"
    >
      <div>
        <div class="popup_title">工作量</div>
        <div>
          未提交的工作量：{{ work_value_data.workloads - work_value_data.committedWorkloads }}
        </div>
        <el-form
          ref="formRef"
          style="max-width: 600px"
          :model="formData"
          :rules="rules"
          label-width="90px"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="工作量" prop="work_today_value">
            <el-input type="number" v-model="formData.work_today_value" />
          </el-form-item>
        </el-form>
        <div class="popup_btn">
          <nut-button type="primary" @click="add_Work_value_submit">提交</nut-button>
        </div>
      </div>
    </nut-popup>
  </div>
</template>
<style lang="scss" scoped>
.work_body {
  background-color: #fff;
  height: calc(100vh - 52px);
  .work_content {
    .now_value_class {
      display: flex;
      flex-direction: column;
      align-items: center;
      .now_value_title {
        width: calc(100% - 20px);
        height: 50px;
        line-height: 50px;
        text-align: left;
      }
    }
    .add_work_class {
      height: 80px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
  .popup_class_work {
    background-color: aqua;
    .popup_title {
      height: 32px;
      text-align: center;
      line-height: 32px;
    }
    .popup_btn {
      height: 40px;
      text-align: center;
      line-height: 32px;
    }
  }
}
</style>
